<template>
<div>
  <Header></Header>
    <!--创建活动开始-->
		<div class="editBox w1200 bc b87 bg100 pb50 mt30 mb30 " >
			<h1 class="w h40 bg95 c_grn_119c5b fb f14 lh40 bb87" style="text-align: left;"><img src="../../../static/images/write.png"  class="ml20 mr10 vm">创建圈子</h1>
			<table class=" edit_tb f14 lh24 mt40  ml50 mr50 fm-songti">
					<col class="w140"/>
					<col />
			<!--圈子名称-->
				<tr >
					<td class="tr vt">
						<span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>圈子名称:</span>
					</td>
					<td class="clearfix">
						<input class="fl w410 h24  f12 lh24 c40 t1 b87"  type="text" name=""  value="" />
					</td>
				</tr>
				<!--车型-->
				<tr >
					<td class="tr vt">
						<span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型:</span>
					</td>
					<td>
						<div class="w560 b87 pr20  pb20 bg100">
							<ul class="clearfix pointer">
								<li v-for="list in listA.data" class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 ml20 mt20 hoverbg_grn">{{list.typeName}}</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 ml20 mt20 hoverbg_grn">途乐</li>
							</ul>
						</div>
					</td>
				</tr>
				<!--兴趣点-->
				<tr >
					<td class="tr vt" >
						<span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>兴&nbsp;趣&nbsp;点:</span>
					</td>
					<td >
						<div class="w560 b87 pr20  pb20 bg100">
							<ul class="clearfix pointer">
								<li  v-for="list in listB.data" class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 ml20 mt20 hoverbg_grn">{{list.typeName}}</li>
								<li class="fl h30 lh30 f12 c40 b50 br2 pl15 pr15 ml20 mt20 curbg_grn">途乐</li>
							</ul>
						</div>
					</td>
				</tr>
				<!--圈子地址-->
				<tr >
					<td class="tr vt " style="padding-bottom:20px;">
						<span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>圈子地址:</span>
					</td>
					<td style="padding-bottom:20px;">

						<input class="fl w376 pl10 h24  f12 lh24 c40 t1 b87 locationBg"  type="text" name="" value="" placeholder=" 点击选择圈子地址" />
					</td>
				</tr>
				<!--详细地址-->
				<tr >
					<td class="tr vt">
						<span class="inline-block c20 w100 h24 tr mr20">详细地址:</span>
					</td>
					<td class="clearfix">

						<input class="fl w376 pl10 h24  f12 lh24 c40 t1 b87 "  type="text" name="" value="" placeholder="输入圈子详细地址" />
					</td>
				</tr>
				<!--圈子权限-->
				<tr >
					<td class="tr vt">
						<span class="inline-block c20 w100 h24 tr mr20">圈子权限:</span>
					</td>
					<td class="vt">
						<div class="f12 lh24 c50 vm" >
							<input class=" vm mr5 " name="1" id="siteType" type="radio"  checked="checked"/>
							<label for="siteType" class=" mr40 vm ">允许任何人加入</label>
							<input class=" vm mr5  " name="1"  id="siteType2" type="radio" />
							<label for="siteType2" class=" mr40  vm ">验证加入</label>
						</div>
					</td>
				</tr>
				<!--邀请好友-->
				<tr>
					<td class="tr vt " style="padding-bottom:0;">
						<span class="inline-block c20 w100 h24 tr mr20">邀请好友:</span>
					</td>
					<td class="clearfix vt pb10" style="padding-bottom:0;">
						<a href="#" class="fl f12 c40 addIcon h24 pl40 pr20 mr20 mb20 b_grn_119c5b br2 pointer">继续添加</a>
					</td>
				</tr><!--邀请好友tr结束-->
				<!--已添加的好友弹出框-->
				<tr class="">
					<td class="tr vt"></td>
					<td >
						<!--已添加的好友弹出框 主体-->
							<div class="fl pr pl20 pb30  br2 bg100 b_org_f16113 w602 f12 fm-songti c20 letter1 lh200  ">
								<img  class="pa orgArr_up" src="../../../static/images/org_arrow_up.png" width="28" height="18"/>
								<dl class="fl tc mr20 mt20">
									<dt class="pr">
										<img src="../../../static/images/user-img.png" width="60" height="60"/>
										<button class="redCloseX " ></button>
									</dt>
									<dd class="mt5">
										在路上的阿毛
									</dd>
								</dl>
								<dl class="fl tc mr20 mt20">
									<dt class="pr">
										<img src="../../../static/images/user-img.png" width="60" height="60"/>
										<button class="redCloseX " ></button>
									</dt>
									<dd class="mt5">
										在路上的阿毛
									</dd>
								</dl>
								<dl class="fl tc mr20 mt20">
									<dt class="pr">
										<img src="../../../static/images/user-img.png" width="60" height="60"/>
										<button class="redCloseX " ></button>
									</dt>
									<dd class="mt5">
										在路上的阿毛
									</dd>
								</dl>
								<dl class="fl tc mr20 mt20">
									<dt class="pr">
										<img src="../../../static/images/user-img.png" width="60" height="60"/>
										<button class="redCloseX " ></button>
									</dt>
									<dd class="mt5">
										在路上的阿毛
									</dd>
								</dl>
								<dl class="fl tc mr20 mt20">
									<dt class="pr">
										<img src="../../../static/images/user-img.png" width="60" height="60"/>
										<button class="redCloseX " ></button>
									</dt>
									<dd class="mt5">
										在路上的阿毛
									</dd>
								</dl>
								<dl class="fl tc mr20 mt20">
									<dt class="pr">
										<img src="../../../static/images/user-img.png" width="60" height="60"/>
										<button class="redCloseX " ></button>
									</dt>
									<dd class="mt5">
										在路上的阿毛
									</dd>
								</dl>
								<dl class="fl tc mr20 mt20">
									<dt class="pr">
										<img src="../../../static/images/user-img.png" width="60" height="60"/>
										<button class="redCloseX " ></button>
									</dt>
									<dd class="mt5">
										在路上的阿毛
									</dd>
								</dl>
								<dl class="fl tc mr20 mt20">
									<dt class="pr">
										<img src="../../../static/images/user-img.png" width="60" height="60"/>
										<button class="redCloseX " ></button>
									</dt>
									<dd class="mt5">
										在路上的阿毛
									</dd>
								</dl>
								<dl class="fl tc mr20 mt20">
									<dt class="pr">
										<img src="../../../static/images/user-img.png" width="60" height="60"/>
										<button class="redCloseX " ></button>
									</dt>
									<dd class="mt5">
										在路上的阿毛
									</dd>
								</dl>

							</div><!--已添加的好友弹出框 主体结束-->
					</td>
				</tr><!--已添加的好友弹出框tr结束-->
				<!--圈子介绍-->
				<tr >
					<td class="tr vt">
						<span class="inline-block c20 w100 h24 tr mr20">圈子介绍：</span>
					</td>
					<td class="vt" style="text-align: left;">
						<textarea class="= w560 h290 pt10  f12 lh24 c40 t1 b87" name="" rows="" cols="" placeholder="请输入圈子介绍 字数200字以内"></textarea>
					</td>
				</tr>
				<!--圈子封面-->
				<tr>
					<td class="tr vt" >
						<span class="inline-block c20 w100 h24 mr20">圈子封面：</span>
					</td>
					<td class="clearfix vt">
						<div class="pointer w400 h100 mr20 pr b87 bg98 f12 vm c40  tc pointer hoverborder_orgred">
						 	<span class="inline-block vm mt35"><i class=" f20 lh20 vm  fb c50">+</i><i class="lh20 vm f12 c50">上传封面</i><em class="f12 lh20 c50 vm">(1200*300)</em></span>
							<input class="pointer fileBtnPublic w400 h100"  type="file" name="" value="浏览"  title="双击选择文件 "/>
						</div>
						<div class=" w100 h100 mt20 mr20 pr b87 bg98 f12 vm c40  tc pointer hoverborder_orgred">
						 	<span class="inline-block vm mt30"><i class=" f20 lh20 vm  fb c50">+</i><i class="lh20 vm f12 c50">上传圈子头像</i><em class="f12 lh100 c50">(100*100)</em></span>
							<input class="pointer fileBtnPublic w100 h100"  type="file" name="" value="浏览" title="双击选择文件"/>
						</div>
					</td>
				</tr>
				<!--活动介绍图结束-->
				<!--发布活动按钮-->
				<tr>
					<td class="tr vt ">
						<span class="inline-block c20 w100 h24 mr20"></span>
					</td>
					<td>
						<a class="inline-block w160 h40 fm_yahei f16 fb c100 lh40 tc letter2 bg_grn_119c5b  br4 hoverbg_orgred">创建圈子</a>
					</td>
				</tr>

			</table>

		</div><!--创建场地结束-->




  <Footer></Footer>
  <!-- <Login></Login>   -->
</div>
</template>
<script>
import Header from '../../components/header'
import Footer from '../../components/footer'
import axios from '../../../config/http'
// import Login from '../views/login'
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
       listA:[],
       listB:[]
    }
  },
  mounted () {
    this.getListOption()
  },
  methods: {
      //获取车型和兴趣点
     getListOption(){
        axios.post('/Group/GetGroupType').then(res=>{
            let items = res.data.data
            for(let list of items){
                if(list.typeName==="车型"){
                    this.listA = list
                }else if(list.typeName==="兴趣点"){
                    this.listB = list
                }
            }
            console.log(this.listA,this.listB)
        })
    },
    //邀请入圈
    joinClub(){
        axios.post('',{
            "token": "",
            "userNameExtends": "",
            "groupIDExtend": 0,
            "userNameExtend": ""
        }).then(res=>{

        })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
